<template>
    <div class="xtx-city" ref="target">
        <div class="select" @click="toggleDialog" :class="{ active }">
            <span v-if="!fullLocation" class="placeholder">请选择配送地址</span>
            <span v-else class="value">{{fullLocation}}</span>
            <i class="iconfont icon-angle-down"></i>
        </div>
        <div class="option" v-if="active">
            <div v-if="loading" class="loading"></div>
            <template v-else>
                <span @click="changeItem(i)"  class="ellipsis" v-for="i in currList" :key="i.code">{{i.name}}</span>
            </template>
        </div>
    </div>
</template>
<script>
import { ref , computed, reactive} from "vue";
import { onClickOutside } from "@vueuse/core";
import axios from 'axios';
export default {
    name: "XtxCity",
    props:{
        fullLocation:{
            type:String,
            default:''
        },
    },
    setup(props,{emit}) {
        // 控制展开收起,默认收起
        const active = ref(false);
        const cityData = ref([])
        const loading = ref(false)
        // 打开的函数
        const open = () => {
            active.value = true;
            loading.value = true
            getCityData().then(data => {
                cityData.value = data
                loading.value = false
            })
            // 清空选择结果
            for (const key in changeResult) {
                changeResult[key] = ''
            }
        };
        const close = () => {
            active.value = false;
        };
        // 切换展开收起
        const toggleDialog = () => {
            active.value ? close() : open();
        };
        // 点击其他位置隐藏
        const target = ref(null);
        onClickOutside(target, () => {
            close();
        });
        // 实现计算属性 获取当前显示的数据
        const currList = computed(() => {
            let list = cityData.value
            // TODO 根据点击的省份城市获取对应的列表
            if (changeResult.provinceCode) {
                list = list.find(item=>item.code === changeResult.provinceCode).areaList
            }
            if (changeResult.cityCode) {
                list = list.find(item=>item.code === changeResult.cityCode).areaList
            }
            return list
        })
        // 定义选择的省市区数据
        const changeResult = reactive({
            provinceCode:'',
            provinceName:'',
            cityCode:'',
            cityName:'',
            countyCode:'',
            countyName:'',
            fullLocation:''
        })
        const changeItem = (item) =>{
            // 省份
            if (item.level === 0) {
                changeResult.provinceCode = item.code
                changeResult.provinceName = item.name
            }
            // 市
            if (item.level === 1) {
                changeResult.cityCode = item.code
                changeResult.cityName = item.name
            }
            if (item.level === 2) {
                changeResult.countyCode = item.code
                changeResult.countyName = item.name
                changeResult.fullLocation =  `${changeResult.provinceName} ${changeResult.cityName} ${changeResult.countyName}`
                close()
                emit('change', changeResult)
            }
        }
        return { active, toggleDialog, target,currList,loading,changeItem };
    },
};
// 获取省市区的数据
const getCityData = () =>{
    // 1、当本地没有缓存 发请求
    // 2、当本地有缓存 取出本地缓存数据
    return new Promise((resolve,reject)=>{
        if (window.cityData) {
            resolve(window.cityData)
        }else{
            axios.get('https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json').then(res => {
                window.cityData = res.data
                resolve(res.data)
            })
        }
    })
}
</script>
<style scoped lang="less">
.xtx-city {
    display: inline-block;
    position: relative;
    z-index: 400;
    .select {
        border: 1px solid #e4e4e4;
        height: 30px;
        padding: 0 5px;
        line-height: 28px;
        cursor: pointer;
        &.active {
            background: #fff;
        }
        .placeholder {
            color: #999;
        }
        .value {
            color: #666;
            font-size: 12px;
        }
        i {
            font-size: 12px;
            margin-left: 5px;
        }
    }
    .option {
        width: 543px;
        border: 1px solid #e4e4e4;
        position: absolute;
        left: 0;
        top: 29px;
        background: #fff;
        min-height: 30px;
        line-height: 30px;
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        .loading {
            height: 290px;
            width: 100%;
            background: url(../../assets/images/loading.gif) no-repeat center;
        }
        > span {
            width: 130px;
            text-align: center;
            cursor: pointer;
            border-radius: 4px;
            padding: 0 3px;
            &:hover {
                background: #f5f5f5;
            }
        }
    }
}
</style>